import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';
import { Fragment } from '@/components/Fragment';

## Astro

### `Uncaught ReferenceError: global is not defined`

When working with a [Astro](https://astro.build/) project you must make a few modifications. Please follow the steps below.
<Tabs>
  <TabItem title="TypeScript">
**1.** Add the following script to the bottom of the `index.astro` file. This will only run on the client side and will polyfill Node globals.

```html
<script>
  window.global = window;
  window.process = {
    env: { DEBUG: undefined },
  } as unknown as NodeJS.Process;
  var exports = {};
</script>
```

**2.** Update the `astro.config.mjs` to add a resolve object inside the `defineConfig({})` as seen below.

```js
export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})
```
  </TabItem>
  <TabItem title="JavaScript">
**1.** Add the following script to the bottom of the `index.astro` file. This will only run on the client side and will polyfill Node globals.

```html
<script>
  window.global = window;
  window.process = {
    env: { DEBUG: undefined },
  }
  var exports = {};
</script>
```

**2.** Update the `astro.config.mjs` to add a resolve object inside the `defineConfig({})` as seen below.

```js
export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})
```
  </TabItem>
</Tabs>


## Create React App

### CRA 4: `Uncaught ReferenceError: g is not defined`

When using [Geo components](/connected-components/geo) and Create React App v4, users may experience the following error when rendering the `<MapView>` component in a production build:
```bash
Uncaught ReferenceError: g is not defined
```
The error is related to this [maplibre-gl issue](https://github.com/maplibre/maplibre-gl-js/issues/1011#issuecomment-1073112585) and surfaces due to the dropped support for Internet Explorer in `maplibre-gl` v2. To correct this error, you'll need to adjust your browser target for production to exclude Internet Explorer:

**1.** In your `package.json` file of your Create React App, adjust the `browserslist.production` block from:
```json
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  ...
}
```
to the following:
```json
"browserslist": {
  "production": [
    "defaults",
    "not ie 11"
  ],
  ...
}
```
**2.** Rebuild your production application using `npx run build`.

**3.** Run your production build using a tool like [serve](https://www.npmjs.com/package/serve) (`serve -s build`) and verify the `<MapView>` component renders without error.

### CRA 4: Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

Create React App v4 is not officially supported by Amplify UI. When you use it, you may get the following error

```bash
 ./node_modules/@aws-amplify/ui-react/dist/esm/components/..\/\*.mjs

 Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)
```

To resolve the error, you may either (1) upgrade to Create React App version 5 ([Migration Guide](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500)), or (2) override the webpack config using tools like [React App Rewired](https://github.com/timarney/react-app-rewired), [Craco](https://craco.js.org/docs/configuration/webpack/) to add the following rule:

```JavaScript
{
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
}
```

## Jest

### `window.URL.createObjectURL is not a function`

As of v2.15.0 of `@aws-amplify/ui-react` which included the release of Geo components, users of the Jest testing framework may run into the following error when attempting to run tests:

```bash
window.URL.createObjectURL is not a function
```

Please follow the steps below to resolve this issue.

**1.** Navigate to or create a [Jest setup file](https://jestjs.io/docs/configuration#setupfilesafterenv-array) for your project.

**2.** Add the following code to polyfill the unrecognized function in your Jest setup file:

```js
if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = jest.fn();
}
```

This is a known problem when using the `jsdom` library (a dependency of Jest) with a package that uses an unrecognized function. See [this issue](https://github.com/jsdom/jsdom/issues/1721).

## Next.js

### Next 13.4+: React Server Components

Next.js 13.4+ introduces [app directory](https://nextjs.org/docs/app/building-your-application/routing#the-app-directory) with the usage of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components). To use Amplify UI componenents, you must use them inside the Client Component tree by placing `"use client"` at the boundary between your Client and Server component module graph. Please see the Next.js [documentation](https://nextjs.org/docs/getting-started/react-essentials#third-party-packages) on how you could achieve this.

### Next 13.4+: `Module not found` Errors

When you use Amplify with Next.js App Router, you will see the follow errors from `aws-crt` and `encoding` in the server terminal:

```
./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in 'xxx'

./node_modules/@aws-sdk/client-sts/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
Module not found: Can't resolve 'aws-crt' in 'xxx'
```

These errors will not affect the use and functionality of the client, nor will errors appear in the browser console. This is a known transitive issue when using the AWS SDK. The issue is currently tracked [here](https://github.com/aws-amplify/amplify-js/issues/11030).

## Webpack

### Webpack 5+: `Uncaught ReferenceError: process is not defined`

Follow the instructions below to if you are using Webpack 5:

<Alert role="none" variation="info">
*Note:*
Polyfill is only required for Webpack 5+. In this version Node.js global variable shims required by the `aws-amplify` package were removed, which results in the following error message:

```
Uncaught ReferenceError: process is not defined
```

Webpack 4 already includes this polyfill.

</Alert>

1. Add
   [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin)
   as dev dependency:

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install node-polyfill-webpack-plugin -D" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add node-polyfill-webpack-plugin -D" />
</TabItem>
</Tabs>

2. Add the plugin to your `webpack.config.js` plugins list:\_

```js
  plugins: [
    new NodePolyfillPlugin(), // Polyfill Node.js globals (e.g. global, process, etc)
  ],
```

### Webpack 4: Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

Follow [here](#cra-4-cant-import-the-named-export-amplify-from-non-ecmascript-module-only-default-export-is-available) for solutions.


## Vite

### `Uncaught ReferenceError: global is not defined`

When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below.

<Tabs>
  <TabItem title="TypeScript">
    <Fragment>
      {({ platform }) => import(`./shared/vite-polyfill.mdx`)}
    </Fragment>
    <Fragment>
      {({ platform }) => import(`./shared/vite-polyfill-ts.mdx`)}
    </Fragment>
  </TabItem>
  <TabItem title="JavaScript">
    <Fragment>
      {({ platform }) => import(`./shared/vite-polyfill.mdx`)}
    </Fragment>
  </TabItem>
</Tabs>

> If you are still having issues, please see comments on the following issue for additional [Vite workarounds](https://github.com/aws-amplify/amplify-js/issues/9639). Note that there is active ongoing work to make these modifications unnecessary.